<template>
    <div class="outClass">
        <el-container>
            <!-- 页面头部区域 -->
            <el-header>
                <!-- 导航栏 -->
                <el-menu
                    :default-active="activeIndex"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1">用户信息</el-menu-item>
                    <el-menu-item index="2">图书信息</el-menu-item>
                </el-menu>
            </el-header>
            <el-main>
                <router-view>
                </router-view>
            </el-main>
            <el-footer></el-footer>
        </el-container>
    </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      if (key === this.activeIndex) {
        return
      }
      if (key === '1') {
        console.log('红色')
        this.activeIndex = '1'
        this.$router.push('/')
      } else if (key === '2') {
        console.log('黄色')
        this.activeIndex = '2'
        this.$router.push('/yellow')
      } else if (key === '3') {
        console.log('绿色')
        this.activeIndex = '3'
        this.$router.push('/green')
      } else if (key === '4') {
        console.log('蓝色')
        this.activeIndex = '4'
        this.$router.push('/blue')
      }
      console.log(this.activeIndex)
    }
  }
}
</script>

<style lang="less" scoped>
.outClass{
    height: 100%;
}
.el-container{
    height: 100%;
}
.el-header{
    padding:0;
}
.el-main{
    padding:0;
}
.el-footer{
    padding:0;
    background-color: rgb(4, 48, 55);
}

</style>
